<template>
<!--我的商旅-->

  <div>
    <div>
      <el-row style="background: white">
        <el-col :span="24"><div class="tbUpDiv"><img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg"><span class="tbUpPost">我的商旅
        </span>
          <router-link to='/tradetjjs' class="tjj-2">
            <el-button color="#626aef" :dark="isDark" >商旅申请</el-button>
          </router-link>
        </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col>

    <div class="aaa">

      <div class="tbScenCdiv">
        <span>出行日期：</span>
        <el-date-picker
            v-model="d.invoiceOpendate"
            value-format="YYYY-MM-DD"
            placeholder="时间"
            style="width: 300px"
        />



      </div>
      <div class="tj"><input class="tbScenAipt" placeholder="出发地"></div>
      <div class="tj"><input class="tbScenAipt" placeholder="目的地"></div>
      <div class="tj"><input class="tbScenAipt" placeholder="订单金额"></div>
      <div class="tj">

      </div>

      <span class="Display_Search_Button">
              <el-button @click="search" style="margin-bottom: 10px">
                <el-icon><Search /></el-icon>
              </el-button>
            </span>


    </div>



    </el-col>
    </el-row>











    <el-tabs type="border-card" class="demo-tabs" v-model="activeName" :data="d.simdate">

      <el-tab-pane label="全部" name="all">
        <div class="picture" data-v-309cad06="">

          <div class="typeface" data-v-309cad06="">
            <el-row>
              <el-col>
                <el-table :data="d.simdate" style="width: 100%">

                  <el-table-column prop="tourId" label="编号" width="180" />
                  <el-table-column prop="tourStartdate" label="出行日期" width="180" />
                  <el-table-column prop="tourStartspace" label="出发地" width="180" />
                  <el-table-column prop="tourDestination" label="目的地" width="180" />
                  <el-table-column prop="tourType" label="订单类型" width="180" />
                  <el-table-column prop="tourMoney" label="订单金额" width="180" />
                  <el-table-column prop="tourState" label="订单状态" width="180" />
                </el-table>
              </el-col>
            </el-row>
          </div></div>

      </el-tab-pane>
<!--      <el-tab-pane label="审批中">会议决议统计</el-tab-pane>-->
<!--      <el-tab-pane label="待订票">会议任务统计</el-tab-pane>-->
<!--      <el-tab-pane label="待确认">会议任务统计</el-tab-pane>-->
<!--      <el-tab-pane label="已完成">会议任务统计</el-tab-pane>-->
    </el-tabs>
  </div>
  </div>
</template>

<script lang="ts" setup>
import {nextTick, onBeforeMount, reactive, ref, toRefs} from "vue";
import axios from "axios";


const hidddiv=ref(false)
const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据

  simdate:[]
});
const {total,pageNo,pageSize} = toRefs(d);
// 默认点击进来就是全部页面
const activeName = ref('all')

const gitDate =()=>{
  axios.get("http://localhost:1688/selectTour/selectAll").then((res)=>{
    var data=res.data.data
    d.simdate = res.data.data;//获得它的长度
    console.log(res)

  })
}


onBeforeMount(async ()=>{
  nextTick(()=>{
    gitDate()
  })
})


</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 2px solid gainsboro;
  border-bottom: 1px solid gainsboro;

  position: relative;
}
.tbImg{
  margin-left: 30px;
  margin-top: 15px;
}
.tjj-2{
margin: 0px 1000px;


}
.tbUpPost{
  position: relative;
  top: -19px;
  left: 20px;
}
.aaa{
  display:flex;
}
.tj{
  display:flex;
  margin: 5px 10px;
}
.tbScenBipt{
  width: 160px;
}

.tjj{
  margin:10px 20px;
}
.tbScenAipt{
  width: 150px;
  height: 30px;
  border: 1px solid black;
}
.tbScenDdiv{
  /*position: relative;*/
  /*left: 660px;*/
  /*top: -98px;*/
  font-size: 14px;
  /*width: 400px;*/

}
.tbFirstBu{
  height: 36px;
  /*margin-left: 100px;*/
  /*margin-top: -54px;*/
}

</style>